<template>
      <div>
            <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModalofchange" style="margin:0px;padding:0px;margin-left:5px;">
                  <span class="glyphicon glyphicon-cog" style="font-size: 18px;color:#337ab7"></span>
            </button>
            <div class="modal fade" id="myModalofchange" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog" style="width:730px;">
                        <div class="modal-content">
                        <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                              </button>
                              <h4 class="modal-title" id="myModalLabel">
                                    マスタ設定
                              </h4>
                        </div>
                        <div class="modal-body">
                              <div>
                                    店舗階層：
                                    <label class="radio-inline">
                                          <input type="radio" name="radTenpos" value="company" v-model="mastTmp.store.type"> 企業別マスタ
                                    </label>
                                    <select class="form-control" style="display:inline; width:160px;margin-left: 14px;" v-model="companyStoreMastValue" :disabled="!storeDisabled">
                                          <option v-for="(item,index) in getCompanyStoreMastData" :key="index" :value="item.id">{{item.text}}</option>
                                    </select>
                                    <label class="radio-inline" style="margin-left:34px">
                                          <input type="radio" name="radTenpos" value="suntory" v-model="mastTmp.store.type">
                                          サントリーマスタ
                                    </label>
                                    <select id="tenMastClass" class="form-control" style="display:inline; width:160px;margin-left: 14px;" v-model="suntoryStoreMastValue" :disabled="storeDisabled">
                                          <option v-for="(item,index) in storeOptions" :key="index" :value="item.id">{{item.text}}</option>
                                    </select>
                              </div>
                              <div>
                                    商品条件：
                                    <label class="radio-inline">
                                          <input type="radio" name="radSyouhins" value="company" v-model="mastTmp.goods.type"> 企業別マスタ
                                    </label>
                                    <select class="form-control" style="display:inline;width:160px;margin-left: 14px;margin-top:5px;" :disabled="!goodsDisabled" v-model="companyGoodsMastValue">
                                          <option v-for="(item,index) in getCompanyGoodsMastData" :key="index" :value="item.id">{{item.text}}</option>
                                    </select>
                                    <label class="radio-inline" style="margin-left:34px">
                                          <input type="radio" name="radSyouhins" value="suntory" v-model="mastTmp.goods.type"> サントリーマスタ
                                    </label>
                                    <select id="goodsMastClass" class="form-control" style="display:inline;width:160px;margin-top:5px;margin-left: 14px;" :disabled="goodsDisabled" v-model="suntoryGoodsMastValue">
                                          <option v-for="(item,index) in goodsOptions" :key="index" :value="item.id">{{item.text}}</option>
                                    </select>
                              </div>
                        </div>
                        <div class="modal-footer">
                              <button type="button" class="btn btn-primary" @click="chooseMastData()">
                                    確定
                              </button>
                        </div>
                        </div>
                  </div>
            </div>
      </div>
</template>
<script>
export default {
      name:'mastModal',
      props:{
            company:{
                  type:String
            }
      },
      watch:{
            'mastTmp.store.type'(){
                  if(this.mastTmp.store.type === 'company'){
                        this.storeDisabled = true;
                  }else{
                        this.storeDisabled = false;
                  }
            },
            'mastTmp.goods.type'(){
                  if(this.mastTmp.goods.type === 'company'){
                        this.goodsDisabled = true;
                  }else{
                        this.goodsDisabled = false;
                  }
            },
            company(){
                  if(this.mastTmp.store.type !== 'company'){
                        this.companyStoreMastValue = '0000';
                  }
            }
      },
      computed:{
            getCompanyStoreMastData(){
                  var option = this.companyMastData.common_storemst;
                  if( this.companyMastData.kigyo_mst !== undefined 
                    && this.companyMastData.kigyo_mst[this.company] !== undefined 
                    && this.companyMastData.kigyo_mst[this.company].storemst !== undefined ){
                        return option.concat(this.companyMastData.kigyo_mst[this.company].storemst);
                  }
                  return option;
            },
            getCompanyGoodsMastData(){
                  var option = this.companyMastData.common_syohinmst;
                  if( this.companyMastData.kigyo_mst !== undefined 
                    && this.companyMastData.kigyo_mst[this.company] !== undefined
                    && this.companyMastData.kigyo_mst[this.company].common_syohinmst !== undefined ){
                        return option.concat(this.companyMastData.kigyo_mst[this.company].common_syohinmst);
                  }
                  return option;
            }
      },
      data:function(){
            return {
                  getMastUrl:'/suntorylink/module/CGI/COMMON.GET_SUNTORYMASTER_LIST.CGI',
                  getCompanyMastUrl:'/suntorylink/module/CGI/COMMON.GET_MASTER_LIST.CGI',
                  storeOptions:[],
                  goodsOptions:[],
                  companyMastData:{},
                  goodsDisabled:true,
                  storeDisabled:true,
                  companyStoreMastValue:'0000',
                  companyGoodsMastValue:'0000',
                  suntoryStoreMastValue:'0000',
                  suntoryGoodsMastValue:'0000',
                  mastTmp:{
                        store:{
                              type:this.$attrs.storeObj.type,
                              vlaue:this.$attrs.storeObj.value
                        },
                        goods:{
                              type:this.$attrs.goodsObj.type,
                              value:this.$attrs.goodsObj.type
                        }

                  }

            };
      },
      methods:{
            //modal确定事件
            chooseMastData(){
                  this.mastTmp.store.value = this.mastTmp.store.type === 'company'?this.companyStoreMastValue:this.suntoryStoreMastValue;
                  this.mastTmp.goods.value = this.mastTmp.goods.type === 'company'?this.companyGoodsMastValue:this.suntoryGoodsMastValue;
                  this.$emit('mastChoose',this.mastTmp);
                  window.$('#myModalofchange').modal('hide');
            }
      },
      inheritAttrs: false,
      mounted(){
            var vm = this;
            this.$http.get(this.getMastUrl).then(function(response){
                  vm.storeOptions = response.data.tenpomst;
                  vm.goodsOptions = response.data.syohinmst;
                  global.suntoryCd = response.data.suntoryKigyocd;
            });
            this.$http.get(this.getCompanyMastUrl).then(function(response){
                  vm.companyMastData = response.data;
            });
            //向模态窗挂载显示事件
            window.$('#myModalofchange').on('show.bs.modal', function () {
                  vm.mastTmp.store = JSON.parse(JSON.stringify(vm.$attrs.storeObj));
                  if( vm.mastTmp.store.type === 'company' ){
                        vm.companyStoreMastValue = vm.mastTmp.store.value;
                  }else{
                        vm.suntoryStoreMastValue = vm.mastTmp.store.value;
                  }
                  vm.mastTmp.goods = JSON.parse(JSON.stringify(vm.$attrs.goodsObj));
                  if( vm.mastTmp.goods.type === 'company' ){
                        vm.companyGoodsMastValue = vm.mastTmp.goods.value;
                  }else{
                        vm.suntoryGoodsMastValue = vm.mastTmp.goods.value;
                  }
            });
      }
};
</script>